import { View } from "@tarojs/components"
import { useEffect, useState } from "react"
import Event from '../contorl/src/event/index'
import { getGame } from '../contorl/src/main'
import { useDispatch, useSelector } from 'react-redux';
import { setIsShowTips } from '../store/index'
import './index.scss'
export const StartButton = () => {
  const [isGameOver, setIsGameOver] = useState(!!getGame())
  const dispatch = useDispatch()
  useEffect(() => {
    return () => {
      Event.off('start-game')
    }
  })
  const startGame = () => {
    Event.emit('start-game')
    setIsGameOver(true)
    dispatch(setIsShowTips(true))
  }
  return (
    <View>
      {!isGameOver ? <View className="nm-pages-index-start-button">
        <View onTouchEnd={() => startGame()} className="button" hoverClass="button-hover-class"></View>
      </View> : null }
    </View>
  )
}